<script setup>
  import randomTool from '@/js/randomTool';
  import { ref } from 'vue';
  import { RouterLink, RouterView } from 'vue-router';
  const props = defineProps({
    sort: {
      type: Number,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    textMini: {
      type: String,
      required: true,
    },
    date: {
      type: String,
      required: true,
    },
  });
</script>

<template>
  <RouterLink
    class="card_N3 color_white"
    :to="{
      name: 'ViewRecoIdeaDetail',
      params: { param: randomTool.getRandomId(6) + props.sort + randomTool.getRandomId(4) },
    }"
  >
    <div class="text_H3" style="height: 3rem; padding: 1rem">
      <div style="width: 100%; display: inline-block" v-html="title"></div>
    </div>

    <div class="text_H5" style="padding-left: 1rem; padding-right: 1rem">
      <div v-html="textMini"></div>
    </div>
    <div class="text_H5" style="height: 3rem; text-align: right; padding: 1rem">{{ date }}</div>
  </RouterLink>
</template>
